<template>
  <el-dialog class="pick-dialog" title="赔付详情" :visible.sync="dialogVisible" :close-on-click-modal="false" width="1000px">
    <div class="form-box" v-loading="loading">

      <div class="sale-info flex fbt">
        <div>
          <el-descriptions :labelStyle="{
            width:'100px'

          }" title="订单信息" labelClassName="label-txt" border :column='1'>
            <el-descriptions-item label="游戏名称">{{ saleOrder.gameName }}</el-descriptions-item>
            <el-descriptions-item label="游戏账号">{{ saleOrder.accountNumber }}</el-descriptions-item>
            <el-descriptions-item label="区服">{{ saleOrder.qufu }}</el-descriptions-item>
            <el-descriptions-item label="商品编号">{{ saleOrder.goodsId }}</el-descriptions-item>
            <!-- <el-descriptions-item label="平台售价">{{ saleOrder.platformAmount }}</el-descriptions-item> -->
          </el-descriptions>
        </div>
        <div>
          <el-descriptions :labelStyle="{
            width:'100px'

          }" title="买家信息" labelClassName="label-txt" border :column='1'>
            <el-descriptions-item label="买家名称">{{ saleOrder.saleChannel }}</el-descriptions-item>
            <el-descriptions-item label="商品价格">{{ saleOrder.platformAmount }}</el-descriptions-item>
            <!-- <el-descriptions-item label="优惠后金额" >{{ saleOrder.saleAmount }}</el-descriptions-item>
              <el-descriptions-item label="折扣比例">{{ !saleOrder.saleDiscount||saleOrder.saleDiscount=='0.0'?10:saleOrder.saleDiscount }}</el-descriptions-item> -->
            <el-descriptions-item label="实付金额">{{ saleOrder.actualAmount }}</el-descriptions-item>
            <el-descriptions-item label="支付状态">{{commonMaps.buyerPayState[saleOrder.salePay]  }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div style="margin-top:15px">
        <el-descriptions :labelStyle="{
            width:'110px'
          }" title="赔付申请信息" labelClassName="label-txt" border :column='3'>
          <el-descriptions-item label="赔付类型">无货赔付</el-descriptions-item>
          <el-descriptions-item label="赔付金额">{{info.sqAmount}}</el-descriptions-item>
          <el-descriptions-item label="客服是否介入">
            <div>
              <el-tag v-if="info.jieru==1" type="warning">未介入</el-tag>
              <el-tag v-if="info.jieru==2" type="danger">已介入</el-tag>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="申请描述" :span="3">{{ info.sqRemark }}</el-descriptions-item>
          <el-descriptions-item label="图片" :span="3">
            <div v-if="sqImgs&&sqImgs.length">
              <el-image style="width:80px;height:80px; margin-right:10px;margin-bottom:10px" :preview-src-list="sqImgs" preview v-for="(img,i) in sqImgs" :key="i" :src="img"></el-image>

            </div>
          </el-descriptions-item>
          <el-descriptions-item v-if="flag=='kefu'" label="交易群聊" :span="3">
            <el-button type="primary" @click="openHistoryMsg">查看群聊记录</el-button>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 赔付处理信息 -->
      <div style="margin-top:15px" v-if="info.pfState!='1'">
        <el-descriptions :labelStyle="{
            width:'110px'
          }" title="赔付处理信息" labelClassName="label-txt" border :column='3'>
          <el-descriptions-item label="赔付描述" :span="3">{{ info.pfRemark }}</el-descriptions-item>
          <el-descriptions-item label="图片" :span="3">
            <div v-if="pfImg&&pfImg.length">
              <el-image style="width:80px;height:80px; margin-right:10px;margin-bottom:10px" :preview-src-list="pfImg" preview v-for="(img,i) in pfImg" :key="i" :src="img"></el-image>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 客服处理信息 -->
      <div style="margin-top:15px" v-if="info.jieru!='1'&&info.kfState!='1'">
        <el-descriptions :labelStyle="{
            width:'110px'
          }" title="客服处理信息" labelClassName="label-txt" border :column='3'>
          <el-descriptions-item label="实际赔付金额" :span="3">
            <span style="font-size: 18px;color: red;">¥{{ info.sjAmount }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="赔付描述" :span="3">{{ info.kfRemark }}</el-descriptions-item>
          <el-descriptions-item label="图片" :span="3">
            <div v-if="kfImg&&kfImg.length">
              <el-image style="width:80px;height:80px; margin-right:10px;margin-bottom:10px" :preview-src-list="kfImg" preview v-for="(img,i) in kfImg" :key="i" :src="img"></el-image>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- <div style="margin-top:15px">
        <el-descriptions :labelStyle="{
            width:'110px'
          }" title="卖家处理结果" labelClassName="label-txt" border :column='3'>
          <el-descriptions-item label="售后原因">{{info.realReasonsName }}</el-descriptions-item>
          <el-descriptions-item label="退款金额">{{info.afterAmount}}</el-descriptions-item>
          <el-descriptions-item label="补充描述" :span="3">{{ info.description }}</el-descriptions-item>
          <el-descriptions-item label="图片" :span="3">
            <div v-if="kefuImgs&&kefuImgs.length">
              <el-image style="width:80px;height:80px; margin-right:10px;margin-bottom:10px" :preview-src-list="kefuImgs" preview v-for="(img,i) in kefuImgs" :key="i" :src="img"></el-image>

            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div style="margin-top:15px">
        <el-descriptions :labelStyle="{
            width:'110px'
          }" title="客服处理结果" labelClassName="label-txt" border :column='3'>
          <el-descriptions-item label="售后原因">{{info.realReasonsName }}</el-descriptions-item>
          <el-descriptions-item label="退款金额">{{info.afterAmount}}</el-descriptions-item>
          <el-descriptions-item label="补充描述" :span="3">{{ info.description }}</el-descriptions-item>
          <el-descriptions-item label="图片" :span="3">
            <div v-if="kefuImgs&&kefuImgs.length">
              <el-image style="width:80px;height:80px; margin-right:10px;margin-bottom:10px" :preview-src-list="kefuImgs" preview v-for="(img,i) in kefuImgs" :key="i" :src="img"></el-image>

            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div> -->
      <MsgHistroy :showDialog="showDialog" @close="guanbi" :sessionId="toGroups"/>
    </div>
  </el-dialog>
</template>

<script>
import orderAfterApi from "@/api/pickUp/afterSale.js";
import orderApi from "@/api/pickUp/order.js";
import { getDetailclaimRecord } from "../../../../api/peifu";
import MsgHistroy from '@/views/IMmsg/msgHistory/index.vue'
export default {
  name: "afterOrderView",
  components:{MsgHistroy},
  data() {
    var priceRule = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入应付金额"));
      } else if (!this.priceReg.test(value)) {
        callback(new Error("请输入正确的金额"));
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      loading: false,
      info: "",
      infoArr: [],
      userInfo: {}, //当前登录人信息
      afterReasons: [],
      afterReasonsMap: {},
      sqImgs: [],
      ruleForm: {
        id: "",
        pfRemark: "",
        pfImg: "",
      },
      rules: {
        realReasonsId: [
          { required: true, message: "请选择售后原因", trigger: "blur" },
        ],
        platformPayAmount: [
          { required: true, message: "请输入应付金额", trigger: "blur" },
          { validator: priceRule, trigger: "blur" },
        ],
        sellerPayAmount: [
          { required: true, message: "请输入应付金额", trigger: "blur" },
          { validator: priceRule, trigger: "blur" },
        ],
      },
      // 上传相关
      imgShowList0: [],
      newImages0: [],
      imgFileList0: [],
      saleOrder: {},
      kefuImgs: [],
      dakuanImgs: [],
      pfImg: [],
      kfImg: [],
      flag: "",
      showDialog:false,//聊天记录弹出
      toGroups:''
    };
  },
  created() {},
  methods: {
    open(id, flag) {
      this.flag = flag;
      this.ruleForm = {
        id: "",
        pfRemark: "",
        pfImg: "",
      };
      this.ruleForm.id = id;
      // this.getReasons()
      this.getPeifuOrderInfo();
      this.dialogVisible = true;
    },
    // 获取详情
    getPeifuOrderInfo() {
      this.loading = true;
      this.sqImgs = [];
      getDetailclaimRecord(this.ruleForm.id).then((res) => {
        this.info = res.data;
        if (this.info.sqImg) {
          let imgs = [];
          let arr = JSON.parse(this.info.sqImg);
          arr.forEach((r) => {
            imgs.push(r.url);
          });
          this.sqImgs = imgs;
        }
        if (this.info.pfImg) {
          let imgs = [];
          let arr = JSON.parse(this.info.pfImg);
          arr.forEach((r) => {
            imgs.push(r.url);
          });
          this.pfImg = imgs;
        }
        if (this.info.kfImg) {
          let imgs = [];
          let arr = JSON.parse(this.info.kfImg);
          arr.forEach((r) => {
            imgs.push(r.url);
          });
          this.kfImg = imgs;
        }
        this.getSaleOrderInfo();
      });
    },
    // 获取销售订单详情
    getSaleOrderInfo() {
      let obj = {
        id: this.info.sourceId,
        dataType: "",
        type: "",
      };
      if (this.flag == "buyer") {
        // 是买家  查询采购订单
        obj = {
          id: this.info.sourceId,
          dataType: "buy",
          type: 2,
        };
      }
      if (this.flag == "seller") {
        // 是卖家  查询销售订单
        obj = {
          id: this.info.sourceId,
          dataType: "sell",
          type: 1,
        };
      }
      if (this.flag == "kefu") {
        // 是客服
        obj = {
          id: this.info.sourceId,
          dataType: "all",
          type: 1,
        };
      }
      orderApi.orderPayStatusHandle(obj).then((res) => {
        this.saleOrder = res.data;
        this.loading = false;
      });
    },

    // 客服查看群聊记录
    openHistoryMsg() {
      if (!this.saleOrder.toGroup) {
        return this.$message.error("该订单没有关联群聊！");
      }
      this.toGroups = this.saleOrder.toGroup;
      this.showDialog = true;
    },
    //guanbi 群聊记录
    guanbi() {
      this.showDialog = false;
    },
    close(formName) {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.order-info {
  box-sizing: border-box;
  // height: 50px;
  background: #eee;
  padding: 15px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  line-height: 26px;

  > span {
    margin-right: 20px;
  }
}
.form-box {
  .sale-info {
    width: 100%;
    align-content: space-between;
    margin-top: 20px;
    > div {
      width: 50%;
      margin-right: 15px;
    }
  }
}

.zdy-des {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  margin: 6px 0;
}
</style>
